<template>
  <div class="gl_mt_15">
    <div v-if="isPageLoading" class="page_loading fixed">
      <van-loading size="24px" vertical color="#fff">加载中...</van-loading>
    </div>
    <div v-if="messageList.length>0">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text=""
          error-text="请求失败，点击重新加载"
          :error.sync="error"
          @load="getMessageList"
        >
          <template v-for="(item, index ) in messageList">
            <van-cell :key="index">
              <div class="box" @click="toDetail(item)">
                <div>
                  <p class="title">{{ item.name }}</p>
                  <p>
                    <van-tag plain type="primary">
                      <template v-for="ktem in dict.competitionStatus">
                        {{ ktem.code === item.statusCode ? ktem.value : '' }}
                      </template>
                    </van-tag>
                  </p>
                </div>
                <van-row type="flex" justify="space-between">
                  <van-col span="20">{{ item.startTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</van-col>
                  <van-col class="arrow" align="right" span="4"><van-icon name="arrow" /></van-col>
                </van-row>
              </div>
            </van-cell>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
    <div v-else>
      <van-empty description="暂无数据" />
    </div>
  </div>
</template>
<script>
import { api_GET_EventsManagementRegisterCompetitionList } from '@/extend/api/gameswaggerApi/app.js';
import { Api_GET_EventsManagementRegisterCompetitionListQO } from '@/lib/form/game/swaggerForm';
import { mapState } from 'vuex';

export default {
  name: 'System',
  props: {
    statusCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      Api_GET_EventsManagementRegisterCompetitionListQO: new Api_GET_EventsManagementRegisterCompetitionListQO(),
      totalPage: 0,
      isPageLoading: false,
      currentPage: 1,
      messageList: [],
      loading: false,
      // 是否已经加载完成
      finished: false,
      refreshing: false,
      // 是否加载失败
      error: false
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType,
      dict: state => state.dict.dict
    })
  },
  watch: {
    'currentUserType': {
      handler: function(val) {
        if (val) {
          this.Api_GET_EventsManagementRegisterCompetitionListQO.DelegationId = val.delegationId;
          this.Api_GET_EventsManagementRegisterCompetitionListQO.RegisterId = val.registerId;
          this.getMessageList();
        }
      },
      deep: true,
      immediate: true // 初始加载
    }
  },
  created() {
    this.gameId = this.$route.params.id;
  },
  methods: {
    // 获取报项中心列表
    getMessageList(value) {
      this.finished = false;
      this.isPageLoading = true;
      if (this.refreshing) {
        this.messageList = [];
        this.refreshing = false;
        this.Api_GET_EventsManagementRegisterCompetitionListQO.Page = 1;
      }
      this.Api_GET_EventsManagementRegisterCompetitionListQO.SkipCount = (this.Api_GET_EventsManagementRegisterCompetitionListQO.Page - 1) * this.Api_GET_EventsManagementRegisterCompetitionListQO.MaxResultCount;
      this.Api_GET_EventsManagementRegisterCompetitionListQO.StatusCode = this.statusCode;
      this.Api_GET_EventsManagementRegisterCompetitionListQO.Filter = value || '';
      api_GET_EventsManagementRegisterCompetitionList(this.Api_GET_EventsManagementRegisterCompetitionListQO).then(res => {
        var _data = res.items || [];
        var _total = res.totalCount;
        this.messageList = this.messageList.concat(_data);
        this.loading = false;
        this.isPageLoading = false;
        if (_total > this.messageList.length) {
          this.Api_GET_EventsManagementRegisterCompetitionListQO.Page += 1;
        } else {
          this.finished = true;
        }
      }).catch(res => {
        this.error = true;
        this.loading = false;
        this.isPageLoading = false;
      });
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.getMessageList();
    },
    toDetail(item) {
      this.$router.push({
        path: `/myCenter${this.gameId && '/' + this.gameId || ''}/entry/detail`,
        query: { id: item.id, gameRoute: item.route }
      });
    }
  }
};
</script>
<style scoped>
.box {
	border: 1px solid #dbdbdb;
	padding: 5px 15px;
  border-radius: 5px;
  font-size: 12px;
}
.title {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
}
.arrow {
	font-size: 20px;
  color: #666666;
  line-height: 24px;
}
.van-cell::after {
	border: none;
}
</style>
